<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>相对定位与绝对定位</title>
		<style>
			/* 相对定位，box2图片压到box1图片上 */
			.box2{
				
			    position: absolute;
				z-index: 50;
			}
			div.box1{
				width: 250px;
				height: 250px;
				background: #d0d3ff;
				background: url(img/蜡笔小新1.png);
				background-size: 100%;
				/* 声明一个相对定位与方向属性 */
				position: absolute;
				lef t: 230px;
				to p: 40px;
				/* 堆叠 z-index 针对所有的position定位 */
				z-index: 2;
			}
			div.box2{
				width: 250px;
				height: 250px;
				background: #ffddcf;
				background: url(img/圣诞.png);
				background-size: 100%;
				/* 声明一个相对定位与方向属性 */
				position: relative;
				le ft: 270px;
				t op: -151px;
				z-index: 1;
			}
			
		</style>
	</head>
	<body>
		<!-- 定位：相对定位  相对于父元素定位  特点：不脱离文档流
		           功能：单一元素定位，元素在正常文档流 推荐
		           position属性：relative;声明元素可以用相对定位
		           方向属性：left、right、top、bottom
				   z轴堆叠顺序属性：z-index
				          属性值数值，数值越大，越靠前
						  
				   绝对定位：按照定位祖先【页面左上角】进行定位
				   功能：脱离文档流，不占据原空间
				   方向属性和叠加属性和相对以及固定定位共用
				   position属性：absolute;声明文员可以使用绝对	定位	
							  
				   实际开发中：相对定位结合绝对定位一起使用
							  侧边栏、左栏、遮罩层【挂靠】
				   案例：左栏弹出【html结构，语义化标签+css两种定位+js】				   
		 -->
		 <div class="box1"></div>
		 <div class="box2"></div>
	</body>
</html>